<style lang="scss" scoped>
.mev-pledge-num-wrap {
	margin: 0 30rpx;

	.mev-pledge-num-wrap-title {
		font-family: Source Han Sans CN;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		line-height: 64rpx;
	}

	.mev-pledge-num-wrap-rounded-wrap {
		width: 690rpx;

		height: 180rpx;
		background: #110F20;
		border-radius: 30rpx;
		display: flex;
		align-items: center;

		.mev-pledge-num-wrap-rounded {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.mev-pledge-num-wrap-rounded-logo {
				width: 120rpx;
				height: 120rpx;
				margin: 30rpx 20rpx 30rpx 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.mev-pledge-num-wrap-rounded-name {
				font-family: Source Han Sans CN;
				font-weight: 300;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 64rpx;
			}
		}





	}



}

.mev-pledge-amount-wrap {
	margin: 0 30rpx;

	.mev-pledge-amount-wrap-title {
		font-family: Source Han Sans CN;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		line-height: 64rpx;
	}

	.mev-pledge-amount-search-wrap {

		width: 690rpx;
		height: 108rpx;
		background: #110F20;
		border-radius: 30rpx;
		border: 2rpx solid #6C7680;
		display: flex;
		align-items: center;
		justify-content: 0;

		.mev-pledge-amount-search-wrap-icon {
			margin: 30rpx 20rpx 30rpx 30rpx;
			width: 48rpx;
			height: 48rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mev-pledge-amount-search-wrap-input {
			display: flex;
			align-items: center;

			input {
				color: white;
			}
		}

		.mev-pledge-amount-search-wrap-select {
			display: flex;
			align-items: center;

			.mev-pledge-amount-search-wrap-select-label {
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 24rpx;
				color: #45E5AF;
				line-height: 64rpx;
			}

			.mev-pledge-amount-search-wrap-select-icon {
				width: 20rpx;
				height: 12rpx;
				margin-left: 16rpx;
				margin-right: 36rpx;
			}
		}

	}

	.recharge-tag {
		display: flex;
		justify-content: space-between;

		.recharge-tag-left {
			text {
				font-family: Source Han Sans CN;
				font-weight: 300;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 64rpx;
			}
		}

		.recharge-tag-right {
			text {
				font-family: Source Han Sans CN;
				font-weight: 300;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 64rpx;
			}
		}
	}

	.recharge-btn-wrapper {
		height: 88rpx;
		background: linear-gradient(0deg, #47D7A5, #B5F4B3);
		border-radius: 44rpx;

		.recharge-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}


		.recharge-btn-text {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 36rpx;
			color: #0D081A;
			line-height: 64rpx;
		}
	}
}

.mev-follow-robot-wrap-title {
	margin: 0 30rpx;
	font-family: Source Han Sans CN;
	font-size: 36rpx;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 64rpx;
}

.mev-follow-robot-wrap {
	background: #110F20;
	border-radius: 30rpx;
	margin: 0 30rpx;

	.mev-follow-robot-search-wrap {

		// width: 690rpx;

		height: 108rpx;
		background: #110F20;
		border-radius: 30rpx;
		border: 2rpx solid #6C7680;
		display: flex;
		align-items: center;
		justify-content: 0;

		.mev-follow-robot-search-wrap-icon {
			margin: 30rpx 20rpx 30rpx 30rpx;
			width: 48rpx;
			height: 48rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mev-follow-robot-search-wrap-input {
			display: flex;
			align-items: center;

			input {
				color: white;
			}
		}

		.mev-follow-robot-search-wrap-select {
			display: flex;
			align-items: center;

			.mev-follow-robot-search-wrap-select-label {
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 24rpx;
				color: #45E5AF;
				line-height: 64rpx;
			}

			.mev-follow-robot-search-wrap-select-icon {
				width: 20rpx;
				height: 12rpx;
				margin-left: 16rpx;
				margin-right: 36rpx;
			}
		}
	}

	.mev-follow-robot-wrap-content {
		margin: 0 20rpx;

		.mev-follow-robot-wrap-content-title {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.mev-follow-robot-wrap-content-title-logo {
				width: 98rpx;
				height: 98rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.mev-follow-robot-wrap-content-title-text {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.mev-follow-robot-wrap-content-title-text-name-1 {
					font-family: Source Han Sans CN;
					font-weight: 300;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 64rpx;
				}

				.mev-follow-robot-wrap-content-title-text-name-2 {
					font-family: Source Han Sans CN;
					font-weight: 300;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 64rpx;
				}

			}

			.mev-follow-robot-wrap-content-title-time {
				margin-left: 160rpx;
				width: 180rpx;
				height: 60rpx;
				background-color: #45E5AF;
				border-radius: 30rpx 30rpx 0rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-family: Source Han Sans CN;
					font-weight: 300;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 64rpx;
				}
			}
		}

		.recharge-tag {
			display: flex;
			justify-content: space-between;

			.recharge-tag-left {
				text {
					font-family: Source Han Sans CN;
					font-weight: 300;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 64rpx;
				}
			}

			.recharge-tag-right {
				text {
					font-family: Source Han Sans CN;
					font-weight: 300;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 64rpx;
				}
			}
		}

		.recharge-btn-wrapper {
			background: linear-gradient(0deg, #47D7A5, #B5F4B3);
			border-radius: 44rpx;
			width: 600rpx;
			margin: 0 auto;

			.recharge-btn {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}


			.recharge-btn-text {
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 36rpx;
				color: #0D081A;
				line-height: 64rpx;
			}
		}
	}
}


/* 跟单记录 */
.mev-follow-record-wrap {
	margin: 0 30rpx;

	.mev-follow-record-wrap-title {
		font-family: Source Han Sans CN;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		line-height: 64rpx;
	}

	.mev-follow-record-wrap-content {
		.mev-follow-record-wrap-content-wrap {
			.mev-follow-record-wrap-content-wrap-rounded {
				align-items: stretch;
				/* 让子元素的高度拉伸以适应容器 */
				background: #110F20;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.mev-follow-record-wrap-content-wrap-rounded-logo {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				margin-left: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.mev-follow-record-wrap-content-wrap-rounded-name {
				height: 180rpx;
				width: 216rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text-align: left;

				.mev-follow-record-wrap-content-wrap-rounded-name-1 {
					width: 216rpx;
					padding-top: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 300;
					font-size: 30rpx;
					color: #FFFFFF;
					// line-height: 64rpx;
				}

				.mev-follow-record-wrap-content-wrap-rounded-name-2 {
					width: 216rpx;
					padding-top: 10rpx;
					font-family: Source Han Sans CN;
					font-weight: 300;
					font-size: 24rpx;
					color: #FFFFFF;
					// line-height: 64rpx;
				}

				.mev-follow-record-wrap-content-wrap-rounded-name-3 {
					width: 216rpx;
					padding-top: 10rpx;
					margin-bottom: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 300;
					font-size: 24rpx;
					color: #FFFFFF;
					// line-height: 64rpx;
				}
			}

			.mev-follow-record-wrap-content-wrap-rounded-time {

				// margin-left: 160rpx;
				width: 180rpx;
				height: 60rpx;
				background-color: #45E5AF;
				border-radius: 30rpx 30rpx 0rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-family: Source Han Sans CN;
					font-weight: 300;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 64rpx;
				}
			}
		}
	}
}
</style>

<template>
	<view class="">
		<z-paging ref="paging" v-model="list" bg-color="#0D081A" @query="getList">
			<view class="" slot="top">
				<NavBarCommon />
			</view>


			<view class="">
				<!-- 数量 -->
				<view class="mev-pledge-num-wrap">
					<view class="mev-pledge-num-wrap-title">
						<text>质押数量</text>
					</view>
					<u-gap height="13"></u-gap>
					<view class="mev-pledge-num-wrap-rounded-wrap">
						<view class="mev-pledge-num-wrap-rounded">
							<view class="mev-pledge-num-wrap-rounded-logo">
								<image src="/static/image/mev/logo.png" />
							</view>
							<view class="mev-pledge-num-wrap-rounded-name">
								<text>SOL智能链</text>
							</view>
						</view>

					</view>
				</view>
				<u-gap height="24"></u-gap>
				<!-- 金额 -->
				<view class="mev-pledge-amount-wrap ">
					<view class="mev-pledge-amount-wrap-title">
						<text>充值金额</text>
					</view>
					<u-gap height="13"></u-gap>
					<view class="mev-pledge-amount-search-wrap">
						<view class=" mev-pledge-amount-search-wrap-icon">
							<image src="/static/image/mev/t.png" />
						</view>
						<view class="mev-pledge-amount-search-wrap-input flex-1">
							<input class="flex-1" type="number" placeholder="请输入充值金额" v-model="rechargeAmount"
								@confirm="rechargeAmountConfirm" />
						</view>
						<view class="mev-pledge-amount-search-wrap-select flex">
							<text class="label mev-pledge-amount-search-wrap-select-label">USDT</text>
							<image class="mev-pledge-amount-search-wrap-select-icon" src="/static/image/mev/select.png"
								mode="scaleToFill" />
						</view>
					</view>
					<u-gap height="10"></u-gap>
					<view class="recharge-tag">
						<view class="recharge-tag-right">
							<text>手续费: 00</text>
						</view>
						<view class="recharge-tag-left">
							<text>账户余额: 00</text>
						</view>
					</view>
					<u-gap height="26"></u-gap>
					<view class="recharge-btn-wrapper" @click="getBtn">
						<view class="recharge-btn">
							<text class="recharge-btn-text">充值</text>
						</view>
					</view>

				</view>
				<u-gap height="25"></u-gap>
				<!-- 跟单机器人 -->
				<view class="mev-follow-robot-wrap-title">
					<text>跟单机器人</text>
				</view>
				<u-gap height="13"></u-gap>
				<view class="mev-follow-robot-wrap">
					<u-gap height="15"></u-gap>
					<view class="mev-follow-robot-wrap-content  ">

						<view class="mev-follow-robot-wrap-content-title">
							<view class="mev-follow-robot-wrap-content-title-logo">
								<image src="/static/image/mev/logo.png" mode="scaleToFill" />
							</view>
							<view class="mev-follow-robot-wrap-content-title-text">
								<text class=" mev-follow-robot-wrap-content-title-text-name-1">SOL智能链</text>
								<text class=" mev-follow-robot-wrap-content-title-text-name-2">8.00%-15.00%月</text>
							</view>
							<view class="mev-follow-robot-wrap-content-title-time">
								<text>90 天</text>
							</view>
						</view>
						<u-gap height="21"></u-gap>
						<view class="mev-follow-robot-search-wrap">
							<view class=" mev-follow-robot-search-wrap-icon">
								<image src="/static/image/mev/t.png" />
							</view>
							<view class="mev-follow-robot-search-wrap-input flex-1">
								<input class="flex-1" type="number" placeholder="请输入跟单金额" v-model="followAmount"
									@confirm="followAmountConfirm" />
							</view>
							<view class="mev-follow-robot-search-wrap-select flex">
								<text class="label mev-follow-robot-search-wrap-select-label">USDT</text>
								<image class="mev-follow-robot-search-wrap-select-icon" src="/static/image/mev/select.png"
									mode="scaleToFill" />
							</view>
						</view>
						<u-gap height="15"></u-gap>
						<view class="mev-follow-robot-search-wrap">
							<view class=" mev-follow-robot-search-wrap-icon">
								<image src="/static/image/mev/clock.png" />
							</view>
							<view class="mev-follow-robot-search-wrap-input flex-1">
								<input class="flex-1" type="number" placeholder="请选择跟单时间" v-model="followTime"
									@confirm="followTimeConfirm" />
							</view>
							<view class="mev-follow-robot-search-wrap-select flex">
								<image class="mev-follow-robot-search-wrap-select-icon" src="/static/image/mev/select.png"
									mode="scaleToFill" />
							</view>
						</view>
						<u-gap height="20"></u-gap>
						<view class="recharge-btn-wrapper" @click="getBtn">
							<view class="recharge-btn">
								<text class="recharge-btn-text">确认</text>
							</view>
						</view>
						<u-gap height="19"></u-gap>

					</view>
				</view>
				<!-- 跟踪记录 -->
				<u-gap height="22"></u-gap>
				<view class="mev-follow-record-wrap">
					<view class="mev-follow-record-wrap-title flex items-center justify-between">
						<text>跟踪记录</text>
						<view class="mev-follow-record-wrap-title-right flex items-center justify-center">
							<image src="/static/image/my/right.png" style="width: 20rpx; height: 38rpx;" />
						</view>
					</view>

					<view class="mev-follow-record-wrap-content">
						<view class="mev-follow-record-wrap-content-wrap ">
							<view class="mev-follow-record-wrap-content-wrap-rounded-wrap " style="margin-top: 30rpx;"
								v-for="item, index in list" :key="index">
								<view class="mev-follow-record-wrap-content-wrap-rounded">
									<view class="mev-follow-record-wrap-content-wrap-rounded-logo">
										<image src="/static/image/mev/avatar.png" />
									</view>
									<view class="mev-follow-record-wrap-content-wrap-rounded-name flex flex-column justify-between">
										<text class="mev-follow-record-wrap-content-wrap-rounded-name-1">BSC机器人 VIP8</text>
										<text class="mev-follow-record-wrap-content-wrap-rounded-name-2">金额:2326</text>
										<text class="mev-follow-record-wrap-content-wrap-rounded-name-3">2025 03-03 10:20</text>
									</view>
									<view class="flex flex-column justify-between " style="flex-grow: 1;height: 180rpx;align-items: end;">
										<view class="mev-follow-record-wrap-content-wrap-rounded-time">
											<text>90 天</text>
										</view>
										<view class="mev-follow-record-wrap-content-wrap-rounded-time-remaining text-right" style="
										margin-right: 30rpx;;font-family: Source Han Sans CN;margin-bottom: 30rpx;
font-weight: 300;
font-size: 24rpx;
color: #FFFFFF;">
											<text>剩余:33天</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view slot="bottom">
			</view>
		</z-paging>
	</view>
</template>

<script>
export default {
	methods: {
		rechargeAmountConfirm(e) {
			console.log(this.rechargeAmount, 'e rechargeAmountConfirm')
		},
		followAmountConfirm(e) {
			console.log(this.followAmount, 'e followAmountConfirm')
		},
		followTimeConfirm(e) {
			console.log(this.followTime, 'e followTimeConfirm')
		},
		confirm(e) {
			console.log(e, 'e')
			this.getBtn()
		},
		getBtn() {
			console.log(this.rechargeAmount, this.followAmount, this.followTime, 'getBtn')
		},
		search(value) {
			console.log(value)
			this.searchValue = value
		},
		getList() {
			this.list = [
				{
					name: "BTC",
					described: "Bitcion",
					newPrice: "$3.36",
					image: "/static/image/home/btc.png",
					rise: "1.23%",
				},
				{
					name: "ETH",
					described: "Ethereum",
					newPrice: "$52.36",
					image: "/static/image/home/eth.png",
					rise: "1.23%",
				},
				{
					name: "OKB",
					described: "OKB",
					newPrice: "$3.36",
					image: "/static/image/home/okb.png",
					rise: "1.23%",
				},
				{
					name: "BNB",
					described: "Binance",
					newPrice: "$51,556.84",
					image: "/static/image/home/bnb.png",
					rise: "1.23%",
				},
				{
					name: "BNB",
					described: "Binance",
					newPrice: "$51,556.84",
					image: "/static/image/home/bnb.png",
					rise: "1.23%",
				},
				{
					name: "BNB",
					described: "Binance",
					newPrice: "$51,556.84",
					image: "/static/image/home/bnb.png",
					rise: "1.23%",
				},
				{
					name: "BNB",
					described: "Binance",
					newPrice: "$51,556.84",
					image: "/static/image/home/bnb.png",
					rise: "1.23%",
				}
			]
			this.$nextTick(() => {
				this.$refs.paging.complete(this.list)
			})
		}
	},
	onLoad() {
	},
	onShow() {

	},
	data() {
		return {
			list: [],
			searchValue: '',
			// 充值金额
			rechargeAmount: '',
			// 跟单金额
			followAmount: '',
			// 跟单时间
			followTime: '',
		};
	},
};
</script>